<template>
<!-- 主容器 - 填充整个页面 -->
<div class="w-full min-h-screen bg-gray-50 dark:bg-gray-900">
  <!-- 内容区域 -->
  <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
    <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
      
      <!-- 左侧主内容区域 -->
      <div class="lg:col-span-3">
          <!-- 文章列表 -->
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

  <div v-for="(article, index) in articles" :key="index"
      class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm hover:shadow-lg transition-all duration-300 overflow-hidden">
      <a @click="goArticleDetail(article.id)" class="cursor-pointer block">
          <img class="w-full h-48 object-cover" :src="article.titleImage" :alt="article.title" />
      </a>
      <div class="p-6">
          <!-- 标签 -->
          <div class="mb-4 flex flex-wrap gap-2">
              <span @click="goTagArticleListPage(item.id, item.name)" v-for="(item, index) in article.tags"
                  :key="index"
                  class="inline-block bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-300 text-xs font-medium px-3 py-1 rounded-full hover:bg-green-200 dark:hover:bg-green-800 hover:text-green-900 dark:hover:text-green-200 cursor-pointer transition-colors duration-200">
                  {{ item.name }}
              </span>
          </div>
          <a @click="goArticleDetail(article.id)" class="cursor-pointer">
              <h2 class="mb-3 text-xl font-bold tracking-tight text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 line-clamp-2">{{
                  article.title }}</h2>
          </a>
          <p class="mb-4 text-gray-600 dark:text-gray-400 line-clamp-3">{{ article.description }}</p>
          <!-- meta 信息 -->
          <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 space-x-4">
              <div class="flex items-center">
                  <svg class="w-4 h-4 mr-2" aria-hidden="true"
                  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M5 1v3m5-3v3m5-3v3M1 7h18M5 11h10M2 3h16a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z" />
              </svg>
              {{ article.createTime }}
              </div>

              <div class="flex items-center">
                  <svg class="w-4 h-4 mr-2" aria-hidden="true"
                      xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M1 5v11a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H1Zm0 0V2a1 1 0 0 1 1-1h5.443a1 1 0 0 1 .8.4l2.7 3.6H16a1 1 0 0 1 1 1v2H5" />
                  </svg>
                  <a @click="goCatagoryArticleListPage(article.category.id, article.category.name)"
                      class="hover:text-blue-600 dark:hover:text-blue-400 cursor-pointer transition-colors duration-200">{{ article.category.name }}</a>
              </div>
          </div>
      </div>
  </div>
  </div>

  <!-- 分页 -->
  <nav aria-label="Page navigation" v-if="total > 0" class="mt-8">
  <ul class="flex items-center justify-center space-x-1">
      <li>
          <a v-if="current > 1" @click="getArticles(current - 1)"
              class="flex items-center justify-center w-10 h-10 text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white transition-colors duration-200 cursor-pointer">
              <span class="sr-only">Previous</span>
              <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                  viewBox="0 0 6 10">
                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                      stroke-width="2" d="M5 1 1 5l4 4" />
              </svg>
          </a>
          <span v-else
              class="flex items-center justify-center w-10 h-10 text-gray-300 dark:text-gray-600 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg cursor-not-allowed">
              <span class="sr-only">Previous</span>
              <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                  viewBox="0 0 6 10">
                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                      stroke-width="2" d="M5 1 1 5l4 4" />
              </svg>
          </span>
      </li>
      <li v-for="page in pages" :key="page">
          <a @click="getArticles(page)"
              class="flex items-center justify-center w-10 h-10 border border-gray-300 dark:border-gray-600 rounded-lg cursor-pointer transition-colors duration-200"
              :class="[page == current ? 'text-blue-600 bg-blue-50 dark:bg-blue-900 dark:text-blue-300 border-blue-300 dark:border-blue-600 hover:bg-blue-100 dark:hover:bg-blue-800' : 'text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white']">
              {{ page }}
          </a>
      </li>
      <li>
          <a v-if="current < pages" @click="getArticles(current + 1)"
              class="flex items-center justify-center w-10 h-10 text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-white transition-colors duration-200 cursor-pointer">
              <span class="sr-only">Next</span>
              <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                  viewBox="0 0 6 10">
                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                      stroke-width="2" d="m1 9 4-4-4-4" />
              </svg>
          </a>
          <span v-else
              class="flex items-center justify-center w-10 h-10 text-gray-300 dark:text-gray-600 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg cursor-not-allowed">
              <span class="sr-only">Next</span>
              <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                  viewBox="0 0 6 10">
                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                      stroke-width="2" d="m1 9 4-4-4-4" />
              </svg>
          </span>
      </li>
  </ul>
  </nav>
      </div>

      <!-- 右边栏 -->
      <div class="lg:col-span-1">
        <div class="sticky top-6 space-y-6">
          <!-- 用户信息卡片 -->
          <UserInfoCard></UserInfoCard>
          
          <!-- 分类区域 -->
          <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm p-6">
            <h2 class="mb-4 text-lg font-bold text-gray-900 dark:text-white">分类</h2>
            <div class="space-y-2">
                <a @click="goCatagoryArticleListPage(item.id, item.name)" v-for="(item, index) in categories"
                    :key="index"
                    class="flex items-center w-full px-4 py-3 text-sm font-medium text-gray-700 dark:text-gray-300 rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-blue-700 dark:hover:text-blue-400 transition-colors duration-200 group">
                    <svg class="w-4 h-4 mr-3 text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-400" aria-hidden="true"
                        xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 21 18">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                            stroke-width="1.5"
                            d="M2.539 17h12.476l4-9H5m-2.461 9a1 1 0 0 1-.914-1.406L5 8m-2.461 9H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.443a1 1 0 0 1 .8.4l2.7 3.6H16a1 1 0 0 1 1 1v2H5" />
                    </svg>
                    {{ item.name }}
                </a>
            </div>
          </div>
          
          <!-- 标签区域 -->
          <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm p-6">
            <h2 class="mb-4 text-lg font-bold text-gray-900 dark:text-white">标签</h2>
            <div class="flex flex-wrap gap-2">
                <span @click="goTagArticleListPage(item.id, item.name)" v-for="(item, index) in tags" :key="index"
                    class="inline-block bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-300 text-sm font-medium px-3 py-1 rounded-full hover:bg-green-200 dark:hover:bg-green-800 hover:text-green-900 dark:hover:text-green-200 cursor-pointer transition-colors duration-200">
                    {{ item.name }}
                </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>


<script setup lang="ts">
import UserInfoCard from '@/layouts/client/modules/UserInfoCard.vue';
import { getIndexArticles } from '@/service/api/frontend/index'
import { getCategories } from '@/service/api/frontend/category';
import { getTags } from '@/service/api/frontend/tag';
import { useRoute, useRouter } from 'vue-router';
import { reactive, ref } from 'vue'

const router = useRouter()

const goArticleDetail = (articleId: string | number) => {
    console.log('跳转详情页' + articleId)
    router.push({ path: '/client/home/article-detail', query: { articleId: articleId } })
}

const articles = ref([])
// 当前页码
const current = ref(1)
const total = ref(0)
const size = ref(10)
const pages = ref(0)

// 获取分页数据
async function getArticles(currentNo: number) {
   
    const res =  await getIndexArticles({ current: currentNo, size: size.value })

        console.log(res.data)

                articles.value = res.data.data
                current.value = res.data.current
                total.value = res.data.total
                size.value = res.data.size
                pages.value = res.data.pages

}
getArticles(current.value)

// 获取分类
const categories = ref([])
getCategories().then((e) => {
    console.log('获取分类数据')
    console.log(e)
    categories.value = e.data
})


// 获取标签
const tags = ref([])
getTags().then((e) => {
    console.log('获取标签数据')
    console.log(e)
    tags.value = e.data
})


const goCatagoryArticleListPage = (id: string | number, name: string) => {
    router.push({ path: '/client/category/category-article', query: { id: id, name: name } })
}

const goTagArticleListPage = (id: string | number, name: string) => {
    console.log('跳转 id' + id)
    router.push({ path: '/client/tags/tag-article', query: { id: id, name: name } })
}

</script>


<style scoped>
/* 移除默认的header-banner样式，因为我们已经在模板中处理了布局 */
</style> 